Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.
In this article, we’ll look at some solutions to common JavaScript problems.
Disable Input Conditionally in Vue.js
We can disable an input conditionally in Bue.js by setting the disabled prop of an element.
To do that, we write:
const app = new Vue({
el: '#app',
data: {
disabled: fals,
},
});
Then we write:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" :disabled="disabled">
<p>{{ $data }}</p>
</div>
We toggle the disabled state when we click the button.
And we set the value of the disabled prop to the disabled state.
Check Whether a Radio Button is Selected with JavaScript
To check whether a radio button is selected with JavaScript, we can get the checked property of an element.
For instance, if we have the following HTML:
<input type="radio" name="gender" id="male" value="Male" />
<input type="radio" name="gender" id="female" value="Female" />
Then we can write:
if (document.getElementById('male').checked) {
// ...
}
else if (document.getElementById('female').checked) {
// ...
}
We just get the radio element and check the checked property.
Print Consecutive Values with setTimeout in for loop
If we want to print consecutive values with setTimeout in a for loop, then we’ve to use let to declare the index variable.
let is block-scoped, so it’s confined to the loop.
This means that there will be a distinct index variable for each iteration.
For instance, we can write:
for (let i = 1; i <= 2; i++) {
setTimeout(() => { console.log(i) }, 100);
}
window.location.href and window.open()
window.location.href is a property that lets us change the current URL of the browser.
Changing the value will redirect the page.
window.open() is a method that lets us pass a URL to it to open it in a new window.
For instance:
window.location.href = 'https://example.com';
will redirect us to https://example.com.
On the other hand, if we write:
window.open('https://example.com');
then we’ll open a new window with the URL.
window.open can take more parameters with settings for the window.
Alternative to the Removed Lodash _.pluck Method
We can just use the array instance’s map method to get the property from each entry that we want.
For instance, if we want to get the id property of each entry, we can write:
const ids = arr.map(a => a.id)
Then we return a new array with the id value of each entry.
Repeat String with Javascript
To repeat a string, we can use the string instance’s repeat method.
For example, if we want to repeat a string 3 times, we can write:
"foo".repeat(3);
Then we get:
"foofoofoo"
Convert UTC Epoch to Local Date
We can convert a UTC epoch to a local date by creating a Date instance.
Then we call setUTCSeconds with the seconds to set the seconds to the UTC epoch in seconds.
For instance, we can write:
const utcSeconds = 575849093;
const d = new Date(0);
d.setUTCSeconds(utcSeconds);
We pass in 0 to set the Date to the start of the UTC epoch.
Then we set the seconds to set the seconds.
Get Start and End of a Day in Javascript
To get the start and end of a day in JavaScript, we can write setHours on the Date instance.
For instance, we can write:
const start = new Date();
start.setHours(0, 0, 0, 0);
const end = new Date();
end.setHours(23, 59, 59, 999);
We create a new Date instance.
Then we call setHours with all zeroes to set it to the beginning of the date.
Then we set it to the end of the day by setting the time to hour 23, minute 59, seconds 59, and 999 milliseconds.
We can call toUTCString on start and end to get the formatted date string.
“elseif” Syntax in JavaScript
We write elseif as else if .
For example, we write:
if (foo) {
} else if (bar) {
} else {
}
Conclusion
We can disable inputs conditionally with Vue.js with props.
To get the checked value of the radio button, we can use the checked property.
We can convert UTC epoch to seconds.
And we can set a date to the start and end of the date.
else if is the way to write a block for a conditional branch.
